<script setup lang="ts">
  
</script>

<template>
  <a class="logo" href="/">
    <svg class="logo-svg" viewBox="0 0 128 128" width="24" height="24" data-v-c0161dce="">
      <path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" data-v-c0161dce=""></path>
      <path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-c0161dce=""></path>
    </svg>
    <span class="text">Vue3</span>
  </a>
</template>

<style lang="scss" scoped>
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  &:hover {
    opacity: 0.8;
  }
  .logo-svg {
    width: 38px;
    height: 38px;
  }
  .text {
    margin-left: 5px;
  }
}
</style>